<template>
  <div class="">
    <div class="container-fluid">
     <headers :userInfo="true"></headers>
      <div class="user-info row">
        <div class="col-xs-8">目前下级代理数量为{{ dataList.length }}人</div>
        <div class="col-xs-4 text-right">
          <button class="btn btn-primary" @click="addAgency()">新增代理</button>
        </div>
      </div>
      <div class="tab-box row">
        <div class="col-xs-12">
          <h3>代理商管理表</h3>
          <div class="table-responsive">
            <table class="table table-bordered">
              <tr>
                <th>代理商ID</th>
                <th>帐号</th>
                <th>代理商名称</th>
                <th>库存（金币）</th>
                <th>库存（砖石）</th>
                <th>操作</th>
              </tr>
              <tr v-for="(item,index) in dataList">
                <td>{{ item.id }}</td>
                <td>{{ item.userTel }}</td>
                <td>{{ item.agencyName }}</td>
                <td>{{ item.stockGold }}</td>
                <td>{{ item.stockBrick }}</td>
                <td><span class="btn detail-btn" @click="agencyDetails(item)">详情</span></td>
              </tr>
            </table>
          </div>
        </div>
      </div>

    </div>
    <!-- add layer -->
    <div class="layer-box " id="addBox">
      <form>
        <div class="row" style="margin: 0;">
          <div class="col-xs-12" style="padding: 0 30px;margin-top: 15px;">
            <div class="form-group">
              <label for="">代理商账号</label>
              <input type="text" class="form-control" placeholder="代理商账号">
            </div>
            <div class="form-group">
              <label for="">代理商名称</label>
              <input type="text" class="form-control" placeholder="代理商名称">
            </div>
            <div class="form-group">
              <label for="">备注</label>
              <input type="text" class="form-control" placeholder="备注">
            </div>
          </div>
        </div>
      </form>
    </div>
    <transition name="agency-slide">
      <router-view></router-view>
    </transition>

  </div>
</template>
<script>
  import Headers from '../../components/Header.vue';
  import {mapActions,mapGetters} from 'vuex';
  import {agencyList} from '../../service/getData';
  export default {
    data(){
      return {
        headerTitle:'代理',
        returnStatus:true,
        dataList:''
      }
    },
    components:{Headers},
    computed:{
      ...mapGetters([
        'headerStatus'
      ])
    },
    mounted(){
      let _this = this;
      this.$nextTick(function(){
        _this.headers();
        _this.dataList = agencyList.agencyInfo;
      })
    },
    methods:{
      headers(){
        this.headerStatus.headerTitle = this.headerTitle;
        this.headerStatus.returnStatus = this.returnStatus;
      },
      addAgency(){
        layer.open({
          type: 1,
          title:['新增代理','text-align:center;padding:0;'],
          area:'80%',
          skin: 'layui-layer-demo', //样式类名
          closeBtn: 0, //不显示关闭按钮
          btn:['确认','取消'],
          anim: 2,
          shadeClose: true, //开启遮罩关闭
          content: $('#addBox'),//$('#addBox')
          cancel: function(){

          }

        })
      },
      agencyDetails(item){
        this.$store.state.agencyDetails_data = item;
        //this.$store.state.agencyDetails_data 获取vuex store中的数据
        this.$router.push('/agency/agency_details');
      }


    }
  }
</script>
<style scoped lang="less">
  @import "../../style/main";
  .user-info{
    height: 2.95rem;
    line-height: 2.95rem;
    border-bottom:1px #eee solid;
    .fontAndColor(0.6rem,#000);
  }
  .table tr>td,
  .table tr>th{
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
  }
  @media screen and (max-width: 767px){
    .table-responsive>.table tr>td,
    .table-responsive>.table tr>th{
      white-space: nowrap;
    }
  }
  .agency-slide-enter-active, .agency-slide-leave-active {
    transition: all .3s;
  }
  .agency-slide-enter, .agency-slide-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }
</style>
